<template>
	<view class="discuss  bg-white">


		<view class="item flex" v-for="(item,i) in pageData" :key="i">

			<view class="left ">
				<image :src="res+item.headImg" class="headImg  round" mode=""></image>

			</view>

			<view class="right ">
				<view class="top  flex align-center flex-wrap">
					<view class="name basis-xll">
						{{item.name}}
					</view>
					<view class="bottom basis-xll">
						5分钟前丨18届艺术系
					</view>

				</view>
				<view class="comment">
					{{item.content}}
				</view>

				<view class="reply flex" v-if="item.jieda">
					<view class="reply-name  ">
						讲师解答：
					</view>
					<view class="reply-item ">
						{{item.jieda}}
					</view>
				</view>


			</view>

		</view>
		<view class="foot">
			
		</view>
		<!-- 发表评论 -->
		<view class="applay-box flex align-center justify-between">
			<input type="text" value="" placeholder="输入对课程的问题" class="round" v-model="formData.content" />
			<image :src="res+'/static/cloudClassroom/fabu.png'" class="fabu " mode="" @click="sumbitReplay"></image>
		</view>

	</view>


</template>

<script>
	export default {
		name: "discuss",
		data() {
			return {
				res: this.apiHost + "/static/otherApp/",
				formData: {
					content: ""
				},
				pageData: [

					{
						name: "余摆摆",
						headImg: "/static/cloudClassroom/touxiang1.png",
						content: `逻辑清晰，内容实用，易懂。美女老师的声音悦耳，普通话贼好听。对于有志于数据分析的人来说，是很好的统计科普课程。 关键术语，中英文对照，有助于阅读英文文章。 用Python实现基本的统计概念， 有助于深入理解。有助于了解相关的Python包。`,
						jieda: "谢谢夸奖"
					},
					{
						name: "zhouzhou",
						headImg: "/static/cloudClassroom/touxiang2.png",
						content: `我猜老师是沈阳人，这半拉，那半拉`,
						jieda: ""
					},
					{
						name: "莆田鞋小哥",
						headImg: "/static/cloudClassroom/touxiang3.png",
						content: `听到老师讲解matplotlib讲解很详细，之前一直没学会，这次跟着老师学完理论又用python操作了一遍，理解的更加透彻，希望后面的内容更精彩`,
						jieda: ""
					},
					{
						name: "卓大越",
						headImg: "/static/cloudClassroom/touxiang4.png",
						content: `课程的设置十分合理，前后能够相连，老师的逻辑很清晰，能够通俗易懂的讲解知识点，后面的课程小结又能很好的给到你一个反馈！加上程序化的实践能够让你明白自己是否真的掌握内容，可以说是国内统计不可多得的好课。`,
						jieda: ""
					}


				],



			}


		},
		methods: {
			sumbitReplay() {
				if (this.formData.content == "") {
					uni.showToast({
						title: "请输入对课程的问题",
						icon: "none"
					})
					return
				}

				let dat = {
					name: "我",
					headImg: "/static/cloudClassroom/2.png",
					content: this.formData.content,
					jieda: ""
				};
				this.formData.content="";
				
				this.pageData.unshift(dat);
				this.$forceUpdate();
				



			}
		}



	}
</script>

<style lang="scss" scoped>
	.discuss {
		min-height: 60vh;
		padding-bottom: calc(100vw*(120/750));

		.item {
			padding: calc(100vw*(40/750));

			.left {
				width: calc(100vw*(80/750));

				.headImg {
					width: inherit;
					height: calc(100vw*(80/750));
				}

			}

			.right {
				width: calc(100vw*(551/750));
				margin-left: calc(100vw*(30/750));
				font-family: PingFang SC;

				.top {
					height: calc(100vw*(80/750));

					.name {
						font-size: 28rpx;

						font-weight: 800;
						color: #333333;
					}

					.bottom {
						font-size: 24rpx;
						font-weight: 500;

						color: #999999;
					}
				}

				.comment {
					margin-top: 39rpx;
					font-size: 24rpx;
					font-weight: bold;
					color: #333333;
				}

				.reply {
					margin-top: 18rpx;

					ont-size: 24rpx;
					font-weight: bold;
					color: #1270E0;
					width: inherit;
					background: #F2F2F2;
					border-radius: 20rpx;
					padding: 20rpx;

					.reply-name {
						white-space: nowrap;
					}

					.reply-item {
						color: #333333;

					}
				}

			}

		}


		.applay-box {
			width: 100vw;
			height: calc(100vw*(120/750));
			position: fixed;
			z-index: 99;
			bottom: 0;
			padding: 0 40rpx;
			background: #FFFFFF;
			box-shadow: 0px 0px 20rpx 0px rgba(0, 0, 0, 0.1);
			height: calc(100vw*(120/750) + env(safe-area-inset-bottom) / 2);
			padding-bottom: calc(env(safe-area-inset-bottom) / 2);

			input {
				height: calc(100vw*(80/750));
				width: calc(100vw*(600/750));
				background: #F7F7F7;
				padding: 0 30rpx;
			}

			.fabu {
				height: calc(100vw*(41/750));
				width: calc(100vw*(47/750));

			}


		}

	}
</style>
